<template>
  <!-- <page-header-wrapper style="background: #eff1f4"> -->
  <v-scale-screen
    width="1600"
    height="940"
    :boxStyle="{
      backgroundColor: '#eff1f4',
    }"
  >
    <div class="homemain">
      <a-spin :spinning="spinning" class="homework">
        <a-row :gutter="16" type="flex">
          <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24" class="left">
            <a-row :gutter="[16, 16]">
              <!-- <div v-if="unauditedDisplay">
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24" v-for="item in statisicsOptions" :key="item.title">
                <a-card class="total-card" :bordered="false">
                  <div class="a-flex a-row-between">
                    <div class="content" style="flex: 1">
                      <div class="title text-secondary">{{ item.title }}</div>
                      <div class="fz-38">{{ statisics[item.key] || 0 }}</div>
                    </div>
                    <div class="icon a-flex a-row-center">
                      <a-icon :type="item.icon" class="fz-25"></a-icon>
                    </div>
                  </div>
                </a-card>
              </a-col>
            </div> -->
              <div>
                <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24" v-for="item in statisicsOptions40" :key="item.title">
                  <a-card class="total-card" :bordered="false">
                    <div class="a-flex a-row-between">
                      <div class="content" style="flex: 1">
                        <div class="title text-secondary">{{ item.title }}</div>
                        <div class="fz-38">{{ statisics[item.key] || 0 }}</div>
                      </div>
                      <div class="icon a-flex a-row-center">
                        <a-icon :type="item.icon" class="fz-25"></a-icon>
                      </div>
                    </div>
                  </a-card>
                </a-col>
              </div>
              <a-col :span="24">
                <a-card :bordered="false">
                  <a-row :gutter="[32, 32]">
                    <!-- <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card :bordered="false">
                      <pieChartsTwo :data="chartData" />
                    </a-card>
                  </a-col> -->
                    <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                      <!-- <barCharts :data="chartData" /> -->
                      <pieChartsTwo :data="chartData" />
                    </a-col>
                    <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                      <barChartsTwo :data="chartData" />
                    </a-col>
                  </a-row>
                </a-card>
              </a-col>
            </a-row>
          </a-col>
          <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24" class="right">
            <a-card :bordered="false">
              <a-space direction="vertical" :size="16" style="width: 100%">
                <div class="weather-card">
                  <div>
                    <p class="fz-22">{{ time }}，{{ autousername }}</p>
                    <!-- <p>{{ welcome }}</p> -->
                    <div>
                      <div class="a-flex a-row-around">
                        <div class="a-flex a-flex-column a-row-between" style="height: 100px">
                          <p class="fz-48" style="margin-bottom: 0">{{ weatherObj.temperature }}°</p>
                          <div>
                            <span class="p-r-16">{{ weatherObj.name }}</span>
                            <span>{{ `${weatherObj.windDirection} | ${weatherObj.windPower}` }}</span>
                          </div>
                        </div>
                        <div class style="position: relative">
                          <viewerImage fit="cover" :src="weatherObj.img" style="width: 110px; height: 110px" />
                          <span
                            style="
                              position: absolute;
                              bottom: 8px;
                              left: 50%;
                              transform: translateX(-50%);
                              white-space: nowrap;
                            "
                            >{{ `${weatherObj.min} ~ ${weatherObj.max}℃` }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="calendar-card">
                  <a-calendar :fullscreen="false">
                    <div
                      slot="dateCellRender"
                      slot-scope="value"
                      class="lunar fz-12"
                      :class="
                        getLunar(value).includes('节') || getLunar(value) === '元旦' ? 'text-primary' : 'lunar-color'
                      "
                    >
                      {{ getLunar(value) }}
                    </div>
                  </a-calendar>
                </div>
              </a-space>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 16]" class="p-t-8 homework">
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false">
              <pieCharts :data="chartData" />
            </a-card>
          </a-col>
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false">
              <!-- <pieChartsTwo :data="chartData" /> -->
              <!-- <barCharts :data="chartData" />chartDataThree -->
              <pieChartsThree :data="chartDataThree" />
            </a-card>
          </a-col>
          <!-- <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card :bordered="false">
            <pieChartsTwo :data="chartData" />
          </a-card>
        </a-col> -->
          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false"></a-card>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </v-scale-screen>
  <!-- </page-header-wrapper> -->
</template>

<script>
// rem
const baseSize = 38

// 设置 rem 函数
function setRem() {
  // 当前页面宽度缩放比例，可根据自己需要修改
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}

// 初始化 rem
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

import AMapLoader from '@amap/amap-jsapi-loader'
import solarLunar from 'solarlunar'
import moment from 'moment'
import md5 from 'md5'
import { timeFix } from '@/utils/util'
import { mapGetters } from 'vuex'
import { viewerImage } from '@/components'
import notification from 'ant-design-vue/es/notification'
import barCharts from './components/bar'
import barChartsTwo from './components/barTwo'
import pieCharts from './components/pie.vue'
import pieChartsTwo from './components/pieTwo.vue'
import pieChartsThree from './components/pieThree.vue'
import tableUnExamine from './components/tableUnExamine'
import { getIndexStatisticsCYZX, Get_CYZXDate, getIndexStatisics, get_YHlogin } from '@/api/dashboard'
export default {
  components: {
    viewerImage,
    barCharts,
    pieChartsThree,
    barChartsTwo,
    pieCharts,
    pieChartsTwo,
    tableUnExamine,
  },
  data() {
    return {
      spinning: false,
      unauditedDisplay: true,
      autouserid: '',
      autousername: '',
      statisicsOptions: [
        {
          title: '本月申请人数',
          icon: 'renshu',
          key: 'BYSQRS',
        },
        {
          title: '已审核数量',
          icon: 'shenhe2',
          key: 'FWSL',
        },
        {
          title: '未审核数量',
          icon: 'weishenhe',
          key: 'WSHSL',
        },
        {
          title: '本月异动未处理数量',
          icon: 'weichuli',
          key: 'YDWCLSL',
        },
      ],
      statisicsOptions40: [
        {
          title: '本月申请人数',
          icon: 'renshu',
          key: 'BYSQRS',
        },
        {
          title: '总申请人数',
          icon: 'weichuli',
          key: 'ZSQRS',
        },
        {
          title: '已审核数量',
          icon: 'shenhe2',
          key: 'FWSL',
        },
        {
          title: '未审核数量',
          icon: 'weishenhe',
          key: 'WSHSL',
        },
      ],
      statisics: {},
      chartData: {},
      chartDataThree: {},
      time: timeFix(),
      weatherObj: {
        temperature: '',
        name: '',
        min: '',
        max: '',
        windDirection: '',
        windPower: '',
        img: require('@/assets/weather/weather68.png'),
      },
      weatherList: [
        { id: 1, name: '晴', url: require('@/assets/weather/weather01.png') },
        { id: 2, name: '少云', url: require('@/assets/weather/weather02.png') },
        { id: 3, name: '晴间多云', url: require('@/assets/weather/weather03.png') },
        { id: 4, name: '多云', url: require('@/assets/weather/weather04.png') },
        { id: 5, name: '阴', url: require('@/assets/weather/weather05.png') },
        { id: 6, name: '有风', url: require('@/assets/weather/weather06.png') },
        { id: 7, name: '平静', url: require('@/assets/weather/weather07.png') },
        { id: 8, name: '微风', url: require('@/assets/weather/weather08.png') },
        { id: 9, name: '和风', url: require('@/assets/weather/weather09.png') },
        { id: 10, name: '清风', url: require('@/assets/weather/weather10.png') },
        { id: 11, name: '强风/劲风', url: require('@/assets/weather/weather11.png') },
        { id: 12, name: '疾风', url: require('@/assets/weather/weather12.png') },
        { id: 13, name: '大风', url: require('@/assets/weather/weather13.png') },
        { id: 14, name: '烈风', url: require('@/assets/weather/weather14.png') },
        { id: 15, name: '风暴', url: require('@/assets/weather/weather15.png') },
        { id: 16, name: '狂爆风', url: require('@/assets/weather/weather16.png') },
        { id: 17, name: '飓风', url: require('@/assets/weather/weather17.png') },
        { id: 18, name: '热带风暴', url: require('@/assets/weather/weather18.png') },
        { id: 19, name: '霾', url: require('@/assets/weather/weather19.png') },
        { id: 20, name: '中度霾', url: require('@/assets/weather/weather20.png') },
        { id: 21, name: '重度霾', url: require('@/assets/weather/weather21.png') },
        { id: 22, name: '严重霾', url: require('@/assets/weather/weather22.png') },
        { id: 23, name: '阵雨', url: require('@/assets/weather/weather23.png') },
        { id: 24, name: '雷阵雨', url: require('@/assets/weather/weather24.png') },
        { id: 25, name: '雷阵雨并伴有冰雹', url: require('@/assets/weather/weather25.png') },
        { id: 26, name: '小雨', url: require('@/assets/weather/weather26.png') },
        { id: 27, name: '中雨', url: require('@/assets/weather/weather27.png') },
        { id: 28, name: '大雨', url: require('@/assets/weather/weather28.png') },
        { id: 29, name: '暴雨', url: require('@/assets/weather/weather29.png') },
        { id: 30, name: '大暴雨', url: require('@/assets/weather/weather30.png') },
        { id: 31, name: '特大暴雨', url: require('@/assets/weather/weather31.png') },
        { id: 32, name: '强阵雨', url: require('@/assets/weather/weather32.png') },
        { id: 33, name: '强雷阵雨', url: require('@/assets/weather/weather33.png') },
        { id: 34, name: '极端降雨', url: require('@/assets/weather/weather34.png') },
        { id: 35, name: '毛毛雨/细雨', url: require('@/assets/weather/weather35.png') },
        { id: 36, name: '雨', url: require('@/assets/weather/weather36.png') },
        { id: 37, name: '小雨-中雨', url: require('@/assets/weather/weather37.png') },
        { id: 38, name: '中雨-大雨', url: require('@/assets/weather/weather38.png') },
        { id: 39, name: '大雨-暴雨', url: require('@/assets/weather/weather39.png') },
        { id: 40, name: '暴雨-大暴雨', url: require('@/assets/weather/weather40.png') },
        { id: 41, name: '大暴雨-特大暴雨', url: require('@/assets/weather/weather41.png') },
        { id: 42, name: '雨雪天气', url: require('@/assets/weather/weather42.png') },
        { id: 43, name: '雨夹雪', url: require('@/assets/weather/weather43.png') },
        { id: 44, name: '阵雨夹雪', url: require('@/assets/weather/weather44.png') },
        { id: 45, name: '冻雨', url: require('@/assets/weather/weather45.png') },
        { id: 46, name: '雪', url: require('@/assets/weather/weather46.png') },
        { id: 47, name: '阵雪', url: require('@/assets/weather/weather47.png') },
        { id: 48, name: '小雪', url: require('@/assets/weather/weather48.png') },
        { id: 49, name: '中雪', url: require('@/assets/weather/weather49.png') },
        { id: 50, name: '大雪', url: require('@/assets/weather/weather50.png') },
        { id: 51, name: '暴雪', url: require('@/assets/weather/weather51.png') },
        { id: 52, name: '小雪-中雪', url: require('@/assets/weather/weather52.png') },
        { id: 53, name: '中雪-大雪', url: require('@/assets/weather/weather53.png') },
        { id: 54, name: '大雪-暴雪', url: require('@/assets/weather/weather54.png') },
        { id: 55, name: '浮尘', url: require('@/assets/weather/weather55.png') },
        { id: 56, name: '扬沙', url: require('@/assets/weather/weather56.png') },
        { id: 57, name: '沙尘暴', url: require('@/assets/weather/weather57.png') },
        { id: 58, name: '强沙尘暴', url: require('@/assets/weather/weather58.png') },
        { id: 59, name: '龙卷风', url: require('@/assets/weather/weather59.png') },
        { id: 60, name: '雾', url: require('@/assets/weather/weather60.png') },
        { id: 61, name: '浓雾', url: require('@/assets/weather/weather61.png') },
        { id: 62, name: '强浓雾', url: require('@/assets/weather/weather62.png') },
        { id: 63, name: '轻雾', url: require('@/assets/weather/weather63.png') },
        { id: 64, name: '大雾', url: require('@/assets/weather/weather64.png') },
        { id: 65, name: '特强浓雾', url: require('@/assets/weather/weather65.png') },
        { id: 66, name: '热', url: require('@/assets/weather/weather66.png') },
        { id: 67, name: '冷', url: require('@/assets/weather/weather67.png') },
        { id: 68, name: '未知', url: require('@/assets/weather/weather68.png') },
      ],
    }
  },
  computed: {
    ...mapGetters(['nickname', 'welcome']),
  },
  mounted() {
    this.autologin()
    this.loadWeather()
    for (const item of this.$store.getters.roleid.split(',')) {
      if (item == 40) {
        this.unauditedDisplay = false
      }
    }
  },
  methods: {
    fetchData() {
      this.spinning = true
      const getStatisics = getIndexStatisics({
        // Userid: this.$store.getters.userid,
        Userid: this.autouserid,
        // Userid: 1,
      })
      const getCharts = getIndexStatisticsCYZX({
        // Userid: this.$store.getters.userid,
        Userid: this.autouserid,
        // Userid: 1,
      })
      const getChartsThree = Get_CYZXDate({
        // Userid: this.$store.getters.userid,
        Userid: this.autouserid,
        // Userid: 1,
      })
      Promise.all([getStatisics, getCharts, getChartsThree])
        .then((res) => {
          this.statisics = res[0]
          this.chartData = res[1].shift()
          this.chartDataThree = res[2]
        })
        .finally(() => {
          this.spinning = false
        })
    },
    autologin() {
      const urlParams = new URLSearchParams(window.location.search)
      get_YHlogin({
        username: urlParams.get('username'),
        password: md5(urlParams.get('password')),
        grant_type: 'password',
      })
        .then((res) => {
          if (res.UserID) {
            this.autouserid = res.UserID
            this.autousername = res.UserName
            this.fetchData()
          } else {
            this.$error({
              title: '提示',
              // content: '账号密码错误',
              content: (
                <div class="custom-modal-font">
                  <p>账号密码错误</p>
                </div>
              ),
              width: 500,
            })
          }
        })
        .catch((err) => {})
        .finally(() => {})
    },
    getLunar(value) {
      const momentDate = moment(value)
      const year = Number(momentDate.format('YYYY'))
      const month = Number(momentDate.format('MM'))
      const day = Number(momentDate.format('DD'))
      return this.getlunarDayCn(year, month, day)
    },
    getlunarDayCn(year_, month_, day_) {
      const lunar = solarLunar.solar2lunar(year_, month_, day_)
      const JudgeLunar = solarLunar.solar2lunar(year_, month_, day_ + 1)
      const { isTerm, term, monthCn, dayCn, cMonth, cDay, ncWeek } = lunar
      let showDay = isTerm ? term : dayCn
      if (showDay === '初一') {
        showDay = monthCn
      }
      // 判断是否有腊月三十
      if (JudgeLunar.monthCn === '正月' && JudgeLunar.dayCn === '初一') return '除夕'
      // 节日
      const lunarFestivalMap = {
        正月_初一: '春节',
        正月_十五: '元宵节',
        五月_初五: '端午节',
        七月_初七: '七夕节',
        八月_十五: '中秋节',
        九月_初九: '重阳节',
      }
      const solarFestivalMap = {
        1.1: '元旦',
        3.8: '妇女节',
        5.1: '劳动节',
        5.4: '青年节',
        6.1: '儿童节',
        7.1: '建党节',
        8.1: '建军节',
        '9.10': '教师节',
        10.1: '国庆节',
        12.25: '圣诞节',
      }
      const lunarFestival = lunarFestivalMap[`${monthCn}_${dayCn}`]
      const solarFestival = solarFestivalMap[`${cMonth}.${cDay}`]
      // 父亲节母亲节
      if (cMonth === 5 && cDay > 7 && cDay < 15 && ncWeek === '星期日') return '母亲节'
      if (cMonth === 6 && cDay > 14 && cDay < 22 && ncWeek === '星期日') return '父亲节'
      return lunarFestival || solarFestival || showDay
    },
    loadWeather() {
      window._AMapSecurityConfig = {
        securityJsCode: 'e909b5fa0b31cae74f3c6580a1ab193d',
      }
      AMapLoader.load({
        key: 'f0bfbfac6d986ff63a4fc40e21c3412d', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Weather'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 创建天气查询实例
        var weather = new AMap.Weather()
        // 执行实时天气信息查询
        weather.getLive('贵阳市', (err, data) => {
          if (!err && data.info === 'OK') {
            const { temperature, weather: weatherName, windPower, windDirection } = data
            this.weatherObj.name = weatherName
            this.weatherObj.temperature = temperature
            this.weatherObj.windPower = windPower
            this.weatherObj.windDirection = windDirection
            const img = this.weatherList.find((e) => e.name === weatherName)
            if (img) {
              this.weatherObj.img = img.url
            }
          }
        })
        weather.getForecast('贵阳市', (err, data) => {
          if (!err && data.info === 'OK') {
            const { dayTemp, nightTemp } = data.forecasts[0]
            if (dayTemp > nightTemp) {
              this.weatherObj.max = dayTemp
              this.weatherObj.min = nightTemp
            } else {
              this.weatherObj.max = nightTemp
              this.weatherObj.min = dayTemp
            }
          }
        })
      })
    },
  },
}
</script>
<!-- <style lang="less">
.homework {
  .ant-modal-confirm-content {
    font-size: 100px !important;
  }
  .ant-modal-confirm-body .ant-modal-confirm-content {
    font-size: 100px !important;
  }

}
.custom-modal-font {
  .ant-modal-content {
    .ant-modal-body {
      font-size: 1600px; // 你想要的字体大小
    }
  }
}
</style> -->
<style lang="less" scoped>
@import '~ant-design-vue/dist/antd.less';
.custom-modal-font {
  font-size: 50px !important;
  color: red;
}
.homemain {
  background: #eff1f4;
  margin: 0px auto;
  width: 100%;
  padding-top: 30px;
  min-height: 100%;
  transition: 0.3s;
}

.homework {
  // max-width: 40rem !important;
  max-width: 1600px !important;
  margin: 0 auto;
}

.lunar-color {
  color: rgba(0, 0, 0, 0.25);
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  // font-size: 0.1rem;
  line-height: 1.5;
}
.left {
  height: auto;
  .ant-card {
    border-radius: 12px;
  }
  .total-card {
    height: 140px;
    overflow: hidden;
    .icon {
      width: 46px;
      height: 46px;
      background-color: color(~`colorPalette('@{primary-color}', 1) `);
      border-radius: 14px;
      i {
        color: color(~`colorPalette('@{primary-color}', 3) `);
      }
    }
  }
}
.right {
  width: 50px;
  // padding: 0;
  .ant-card:first-child {
    border-radius: 12px;
    // background-image: linear-gradient(-140deg, #dfe9f3 0%, white 100%);
    min-width: 380px;
  }

  .calendar-card,
  .weather-card {
    border-radius: 12px;
    // box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    padding: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  }
  .weather-card {
    height: 110px;
    overflow: hidden;
    // background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    // background-image: linear-gradient(to right bottom, #dfe9f3 0%, #c2e9fb 20%, white 100%);
  }
}
</style>
